<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">

	<div id="reportForm" style="height:90%;width:80%;">

	</div>


	<div th:include="include :: footer"></div>
	<script type="text/javascript" src="/js/plugins/echarts/echarts-5.3.0/echarts.js" th:src="@{/js/plugins/echarts/echarts-5.3.0/echarts.js}"></script>
	<script type="text/javascript">

		var dateArr = [];

		var d = new Date();
		var i=1;
		for (let j = 0; j < 7; j++) {

			if (i < 7) {
				var month;
				var r = d.getDate() - 1;
				d.setDate(Math.abs(r));
				var day = d.getDate()<10?'0'+d.getDate():d.getDate();
				r<0?month=d.getMonth()<10?'0'+d.getMonth():d.getMonth():month = d.getMonth()+1<10?'0'+parseInt(d.getMonth()+1):d.getMonth()+1;
				var year = new Date().getFullYear();
				//console.log(year+'-'+month+'-'+day+'------'+i);

				dateArr[j] = year+'-'+month+'-'+day;
				i++;
			}else{
				d = new Date();
				i=1;
			}
		}

		var month;
		var r = d.getDate();
		d.setDate(Math.abs(r));
		var day = d.getDate()<10?'0'+d.getDate():d.getDate();
		r<0?month=d.getMonth()<10?'0'+d.getMonth():d.getMonth():month = d.getMonth()+1<10?'0'+parseInt(d.getMonth()+1):d.getMonth()+1;
		var year = new Date().getFullYear();

		dateArr.unshift(year+'-'+month+'-'+day);

		//扣量统计信息
		loadDeReport();


		function loadDeReport(){

			let downTotal = [];
			let deTotal = [];

			$.ajax({
				cache : true,
				type : "get",
				url : ctxPath+"/wallpaper/report/deductionRecordList",
				data : $('#signupForm').serialize(),// 你的formid
				async : false,
				error : function(request) {
				},
				success : function(data) {
					downTotal = data.downTotal;
					deTotal = data.deTotal;
				}
			});

			var chartDom = document.getElementById('reportForm');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
				title: {
					text: '扣量统计',
					textStyle: {
						fontSize: 15
					},
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['下载次数',"扣量次数"]
				},
				grid: {
					left: '5%',
					right: '5%',
					bottom: '5%',
					top : '5%',
					containLabel: true
				},
				toolbox: {
					feature: {
						dataView:{},
						magicType: {
							type: ['line', 'bar','stack']
						},
						saveAsImage: {
						},
						restore:{},
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: dateArr
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: '下载次数',
						type: 'line',
						tiled: 'Total',
						data: downTotal
					},
					{
						name: '扣量次数',
						type: 'line',
						tiled: 'Total',
						data: deTotal
					}
				]
			};

			option && myChart.setOption(option);

		}


	</script>
</body>
</html>